<template>
	<view class="home_page">
		<view class="header">
			<view class="search" @tap="$Router.push({path:'/pages/other/search'})">
				<image src="../../static/img/search.png" mode=""></image>
				<text>搜索</text>
			</view>
			<swiper class="swiper" circular interval="2000" duration="500" :autoplay="false" :indicator-dots="true"
				indicator-color="#ccc" indicator-active-color="#fff">
				<swiper-item v-for="(item,i) in swiper" :key="i">
					<image :src="item.src" mode="widthFix" class="swiperPic"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="container bgc">
			<view class="msg">
				<image class="img" src="../../static/img/tishi_04.png" mode=""></image>
				<view class="title">
					2022新款女装，火热抢购中!
				</view>
			</view>
			<!-- 菜单 -->
			<view class="scroll">
				<u-scroll-list indicatorWidth="45" indicatorBarWidth="22" indicatorActiveColor="#c60122">
					<view class="scroll-list">
						<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
							<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
								:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
								<image class="scroll-list__line__item__image" :src="item1.icon" mode="">
								</image>
								<text class="scroll-list__line__item__text">{{ item1.name }}</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 秒杀 -->
		<view class="seckill">
			<view class="hot-title">
				<view class="title">限时秒杀</view>
				<view class="more" @tap="$Router.push({path: '/pages/goods/seckill'})">
					<view>更多</view>
					<uni-icons type="forward" size="14" color="#989898"></uni-icons>
				</view>
			</view>
			<t-seckill :title="title"></t-seckill>
			<t-mini-card></t-mini-card>
		</view>
		<view class="hot-group">
			<view class="hot-title">
				<view class="title">火热拼团</view>
				<view class="more" @tap="$Router.push({path: '/pages/goods/group'})">
					<view>更多</view>
					<uni-icons type="forward" size="14" color="#989898"></uni-icons>
				</view>
			</view>
			<t-group-cart></t-group-cart>
		</view>
		<view class="hot">
			<view class="title">
				<text class="text">热门推荐</text>
			</view>
			<view class="hot-item">
				<t-big-cart :bigCartList="bigCartList"></t-big-cart>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '限时秒杀',
				swiper: [{
						src: '../../static/img/banner.jpg'
					},
					{
						src: '../../static/img/banner.jpg'
					}, {
						src: '../../static/img/tutu3.png'
					}
				],
				menuArr: [
					[{
							name: '话费充值',
							icon: '../../static/img/list_1.png'
						},
						{
							name: '家居日用',
							icon: '../../static/img/list_2.png'
						}, {
							name: '数码家电',
							icon: '../../static/img/list_3.png'
						}, {
							name: '汽车用品',
							icon: '../../static/img/list_4.png'
						},
						{
							name: '户外运动',
							icon: '../../static/img/list_5.png'
						},
						{
							name: '美妆用品',
							icon: '../../static/img/list_6.png'
						}, {
							name: '母婴儿童',
							icon: '../../static/img/list_7.png'
						}, {
							name: '银行服务',
							icon: '../../static/img/list_8.png'
						}
					],
					[{
							name: '户外运动',
							icon: '../../static/img/list_5.png'
						},
						{
							name: '美妆用品',
							icon: '../../static/img/list_6.png'
						}, {
							name: '母婴儿童',
							icon: '../../static/img/list_7.png'
						}, {
							name: '银行服务',
							icon: '../../static/img/list_8.png'
						},
						{
							name: '户外运动',
							icon: '../../static/img/list_5.png'
						},
						{
							name: '美妆用品',
							icon: '../../static/img/list_6.png'
						}, {
							name: '母婴儿童',
							icon: '../../static/img/list_7.png'
						}, {
							name: '银行服务',
							icon: '../../static/img/list_8.png'
						}
					]
				],
				bigCartList: [{
						name: '牛仔裙',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_1.png'
					},
					{
						name: '连衣裙',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_2.png'
					},
					{
						name: '新款毛衣',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_4.png'
					},
					{
						name: '新款毛衣',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_4.png'
					},
				]
			};
		},
		onLoad() {
			// let token = uni.getStorageSync('token')
			// if(!token) {
			// 	this.$Router.replaceAll('/pages/other/login')
			// }
		},
		methods: {
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	/deep/ .uni-swiper-dot {

		width: 5px;
		height: 5px;

	}

	.bgc {
		background-color: #fff;
	}

	.home_page {
		padding-bottom: 200rpx;

		.search {
			position: absolute;
			top: 76rpx;
			left: 50%;
			width: 95%;
			height: 60rpx;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 30rpx;
			z-index: 999;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 15rpx;
				margin-left: 36rpx;
			}

			text {
				font-size: 28rpx;
				color: #c0c0c0;
			}
		}

		.swiper {
			height: 750rpx;
			width: 100%;
			background-color: #fefefe;

			.swiperPic {
				width: 100%;
				height: 100%;
			}
		}
	}

	.container {
		padding: 28rpx 18rpx 40rpx;

		.msg {
			width: 714rpx;
			background-color: #f5f5f5;
			border-radius: 19rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 21rpx;
			margin-bottom: 33rpx;

			.img {
				width: 21rpx;
				height: 20rpx;
				margin-right: 21rpx;
			}

			.title {
				font-size: 22rpx;
				line-height: 72rpx;
				letter-spacing: 2rpx;
				color: #c60122;
			}
		}

		.scroll {
			margin: 0 11rpx;

			.scroll-list {
				@include flex(column);

				&__line:last-child {
					margin-top: 50rpx;
				}

				&__line {
					@include flex;

					&__item {
						width: 33% !important;
						margin-right: 70rpx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: center;

						&__image {
							width: 83rpx;
							height: 83rpx;
							border-radius: 50%;
							// box-shadow: 0rpx 9rpx 15rpx 0rpx rgba(254, 192, 72, 0.3);
						}

						&__text {
							margin-top: 13rpx;
							font-size: 28rpx;
							letter-spacing: 3rpx;
							color: #333333;
							white-space: nowrap;
						}

						&--no-margin-right {
							margin-right: 0;
						}
					}
				}
			}
		}


	}

	.seckill {
		margin-top: 20rpx;
	}

	.hot-title {
		display: flex;
		justify-content: space-between;
		padding: 39rpx 18rpx 22rpx 18rpx;
		height: 90rpx;
		background-color: #fff;
		box-sizing: border-box;

		.title {
			ffont-family: MicrosoftYaHei-Bold;
			font-size: 30rpx;
			font-weight: bold;
			font-stretch: normal;
			letter-spacing: 3rpx;
			color: #333333;
		}

		.more {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			letter-spacing: 2rpx;
			color: #989898;
		}
	}

	.hot-group {
		margin-top: 20rpx;

	}

	.hot {
		background-color: #fff;

		.hot-item {
			margin: 0 18rpx;

		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			height: 80rpx;
			background-color: #c60122;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-bottom: 30rpx;

			.text {
				position: relative;

				&::before {
					position: absolute;
					top: 50%;
					left: -160rpx;
					transform: translateY(-50%);
					content: '';
					width: 118rpx;
					height: 1rpx;
					background-color: #ffffff;
				}

				&::after {
					position: absolute;
					top: 50%;
					right: -160rpx;
					transform: translateY(-50%);
					content: '';
					width: 118rpx;
					height: 1rpx;
					background-color: #ffffff;
				}
			}

		}



	}
</style>
